<template>
  <div class="index">
    <div data-intro="这里是门诊列表" data-step="1" class="list"></div>
    <div id="A" @click.stop="go" class="click"></div>
    <div class="click_anime"></div>
  </div>
</template>

<script>
import { driver } from "driver.js";
import "@/styles/guideHelper.css"; /* 引入共享样式 */
import { showGuideEffect } from "@/utils/guideHelper";
// import "driver.js/dist/driver.css";
import introJs from "intro.js";
import "intro.js/introjs.css";
export default {
  data() {
    return {
      intro: null,
      driverObj: null,
      guideTimeout: null, // 用于存储 setTimeout 的 ID
    };
  },
  created() {
    this.$nextTick(() => {
      this.stopIntro();
      this.stopDriver();
      // this.guide();
      this.guideTimeout = setTimeout(() => {
        this.startIntro(); // 等待一秒后执行 driver.js
      }, 1000);
    });
  },
  // 页面加载时触发
  mounted() {
    // 阻止点击其他区域取消引导
    document.addEventListener("click", this.preventIntroExit, true);
  },
  // 页面关闭时触发
  beforeDestroy() {
    if (this.guideTimeout) {
      clearTimeout(this.guideTimeout); // 清除定时器
    }
    this.stopIntro();
    this.stopDriver();
    document.removeEventListener("click", this.preventIntroExit, true);
  },
  methods: {
    // 进入下一个页面
    go() {
      this.$router.push({
        path: "/health/register/wx/index20",
      });
    },
    // 点击的引导
    guide() {
      // 定义基本样式
      this.driverObj = driver({
        allowClose: false,
        showProgress: true,
        steps: [
          {
            element: "#A",
            popover: {
              description: "这里以“心血管内科门诊”为例",
              align: "center",
              side: "right",
            },
          },
        ],
      });
      // 开启引导
      this.driverObj.drive();
      // 2秒后显示遮罩和手指
      showGuideEffect();
    },
    // 停止页面引导
    stopIntro() {
      if (this.intro) {
        this.intro.exit();
        this.intro = null;
      }
    },
    // 停止点击引导
    stopDriver() {
      if (this.driverObj) {
        this.driverObj.destroy();
        this.driverObj = null;
        // 移除所有附加的类
        const paths = document.querySelectorAll("path.show-path");
        const click = document.querySelector(".click_anime.isShow");

        if (paths.length) {
          paths.forEach((path) => {
            path.classList.remove("show-path");
          });
        }

        if (click) {
          click.classList.remove("isShow");
        }
      }
    },

    // 页面引导
    startIntro() {
      this.intro = introJs();
      this.intro.setOptions({
        prevLabel: "上一步", //上一步按钮
        nextLabel: "下一步", //下一步按钮
        doneLabel: "结束", //结束按钮
        disableInteraction: true, // 禁用用户交互
        position: "center",
        hidePrev: true, /* 是否在第一步隐藏上一步 */
        hideNext: false, /* 是否在最后一步隐藏下一步 */
      });

      this.intro.onafterchange(() => {
        clearInterval(this.interval);
        // 不操作，3秒自动进入下一步
        this.interval = setInterval(() => {
          this.intro.nextStep();
        }, 3000);
      });

      this.intro.onexit(() => {
        clearInterval(this.interval);
      });
      // 点击结束触发，开启点击引导
      this.intro.oncomplete(() => {
        clearInterval(this.interval);

        setTimeout(() => {
          this.guide(); // 等待一秒后执行 driver.js
        }, 1000);
      });

      this.intro.start();
    },
    preventIntroExit(event) {
      // 获取 intro.js overlay
      const overlay = document.querySelector(".introjs-overlay");
      if (overlay && event.target === overlay) {
        event.stopPropagation();
        event.preventDefault();
      }
    },
  },
};
</script>

<style scoped lang="less">
.index {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(@/assets/health/register/wx/18.jpg) no-repeat top;
  background-size: 100% 100%;
}


@media screen and (min-width: 440px) {
  .list {
    position: absolute;
    bottom: 5px;
    left: 10px;
    width: 390px;
    height: 520px;
  }
  .click {
    position: absolute;
    top: 350px;
    left: 20px;
    width: 370px;
    height: 30px;
  }
  .click_anime {
    z-index: 1000000;
    display: none;
    position: absolute;
    top: 345px;
    left: 150px;
    width: 75px;
    height: 75px;
    background-image: url("@/assets/click.gif");
    background-size: 100% 100%;
    transform: scale(1.2);
  }
}
@media screen and (max-width: 440px) {
  .list {
    position: absolute;
    bottom: 1%;
    left: 4vw;
    width: 92vw;
    height: 71.5%;
  }
  .click {
    position: absolute;
    top: 48%;
    left: 5vw;
    width: 89vw;
    height: 3.5%;
  }
  .click_anime {
    z-index: 1000000;
    display: none;
    position: absolute;
    top: 45.5%;
    left: 75vw;
    width: 150px;
    height: 150px;
    background-image: url("@/assets/click.gif");
    background-size: 100% 100%;
    transform: scale(1.2);
  }
}
</style>
